<script setup lang="ts">
import ButtonIcon from '@/components/custom/button-icon.vue'
import {
  KeyboardDoubleArrowLeftFilled as LeftArrowIcon,
  KeyboardDoubleArrowRightFilled as RightArrowIcon,
  DarkModeFilled as DarkModeIcon,
  LightModeFilled as LightModeIcon
} from '@vicons/material'
import {
  InformationCircle as InfoIcon,
  PersonCircleOutline as UserIcon,
  LogOutOutline as LogoutIcon
} from '@vicons/ionicons5'
import { h } from 'vue'
import type { Component } from 'vue'
import { router } from '@/router'
import { useThemeStore, useAppStore, useUserStore } from '@/stores'
import { NFlex, NAvatar, NDropdown, NIcon } from 'naive-ui'

defineOptions({
  name: 'GlobalHeader'
})

const appStore = useAppStore()
const toggleMenu = () => {
  appStore.toggleMenu()
}

const themeStore = useThemeStore()
const userStore = useUserStore()

const renderIcon = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon)
    })
  }
}

const options = [
  {
    label: '消息中心',
    key: 'message',
    icon: renderIcon(InfoIcon)
  },
  {
    label: '个人中心',
    key: 'profile',
    icon: renderIcon(UserIcon)
  },
  {
    type: 'divider',
    key: 'd1'
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogoutIcon)
  }
]

const handleSelect = (key: string) => {
  // todo 路由跳转
  router.push(`/manage/${key}`)
}
</script>

<template>
  <n-flex class="navbar" align="center" justify="space-between">
    <div class="nav-left">
      <ButtonIcon
        v-if="!appStore.isCollapsed"
        @click="toggleMenu"
        :icon="LeftArrowIcon"
        :size="24"
        tooltipContent="折叠菜单"
      />
      <ButtonIcon
        :size="24"
        v-if="appStore.isCollapsed"
        @click="toggleMenu"
        :icon="RightArrowIcon"
        tooltipContent="展开菜单"
      />
    </div>
    <div class="nav-right">
      <n-flex align="center" justify="space-between">
        <div class="switch-theme-button">
          <ButtonIcon
            v-if="!themeStore.getCurrentTheme"
            @click="themeStore.setDarkTheme()"
            :icon="LightModeIcon"
            :size="24"
            tooltipContent="夜间模式"
          />
          <ButtonIcon
            v-if="themeStore.getCurrentTheme"
            @click="themeStore.setLightTheme()"
            :icon="DarkModeIcon"
            :size="24"
            tooltipContent="日间模式"
          />
        </div>
        <div class="avatar">
          <n-dropdown trigger="click" :options="options" @select="handleSelect">
            <n-avatar class="avatar" :src="userStore.avatar" />
          </n-dropdown>
        </div>
      </n-flex>
    </div>
  </n-flex>
</template>

<style scoped>
.navbar {
  height: 56px;
}

.nav-right {
  padding: 0 20px;
}
</style>
